import { GlobalStore } from "@/stores";
import { getWeekLabel } from "@/utils/format";
import { dayjs } from "element-plus";
import { useRoute, useRouter } from "vue-router";

export default defineComponent({
	emits: [],
	setup(props, { expose }) {
		const route = useRoute();
		const router = useRouter();
		const dayFmt = "YYYY年MM月DD日";
		const timeFmt = "HH时mm分ss秒";
		const globalStore = GlobalStore();

		const day = ref("");
		const week = ref("");
		const time = ref("");
		const state = reactive({
			refresh: null as any
		});
		onBeforeUnmount(() => {
			cleanAutoRefresh();
		});
		const cleanAutoRefresh = () => {
			if (state.refresh) {
				clearTimeout(state.refresh);
				state.refresh = null;
			}
		};
		const loadData = () => {
			let dts = dayjs();
			day.value = dts.format(dayFmt);
			week.value = getWeekLabel(dts.day());
			time.value = dts.format(timeFmt);
			state.refresh = setTimeout(() => {
				if (
					!route.path.includes("/home") &&
					!route.path.includes("/topo") &&
					!route.path.includes("/data") &&
					!route.path.includes("/preview")
				) {
					return;
				}
				loadData();
			}, 1000);
		};
		expose({ loadData });
		return () => {
			return (
				<>
					<div class="left pl-10">
						<span class="pr-2">{day.value}</span>
						<span class="pr-2">{week.value}，</span>
						<span>{time.value}</span>
					</div>
					<div class="system-name">{globalStore.setting.systemName}</div>
					<div class="right pr-10 flex justify-end">
						<el-link underline={false} onClick={() => router.push("/data/monitor")} style="color:#f1f1f1">
							<span>返回系统</span>
							<span class="iconfont iconbx-exit"></span>
						</el-link>
					</div>
				</>
			);
		};
	}
});
